<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <title>黄州区天气</title>
    <style>
        .weather-card {
            background: linear-gradient(135deg, #e0f7fa 0%, #fff3e0 100%);
        }
        .search-box {
            background-color: rgba(255, 255, 255, 0.8);
        }
        .aqi-badge {
            background-color: #4caf50;
        }
    </style>
</head>
<body class="bg-gray-50 p-4">
    <div class="w-[460px] h-[60px] flex items-center justify-between mb-4 px-2">
        <div class="flex items-center">
            <div class="w-[125px] h-[30px] bg-[url('./images/和风图标.png')]" style="background-position: 0px 0px;">
            </div>
        </div>
        
        <div class="relative w-[280px] ml-4">
            <input type="text" 
                   placeholder="搜索城市" 
                   class="search-box w-full pl-10 pr-4 py-2 rounded-full border border-gray-200 
                          text-sm focus:outline-none focus:ring-1 focus:ring-gray-300">
            <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
        </div>
    </div>
    
    <div class="w-[460px] rounded-[23px] weather-card p-6 shadow-sm relative">
        <div class="flex justify-between items-start mb-6">
            <div class="flex items-baseline">
                <div class="text-xl font-bold mr-2">黄州区</div>
                <div class="text-gray-600 text-sm">湖北省/中国</div>
            </div>
            <div class="text-right">
                <div class="text-gray-500 text-sm">2025-09-02 14:40</div>
                <div class="aqi-badge text-white text-xs px-2 py-1 rounded-full mt-1 inline-block">
                    AQI 优
                </div>
            </div>
        </div>
        
        <div class="flex justify-center items-center mb-6">
            <img src="images/太阳.png" 
                 alt="晴天图标" class="w-[100px] h-[100px] mr-2">
            <div class="text-5xl font-bold">33°</div>
            <div class="ml-2 text-xl font-medium">晴</div>
        </div>
        
        <div class="text-center mb-8 text-gray-700">
            今天白天晴，夜晚晴，温度和昨天差不多，现在33°，空气不错。
        </div>
        
        <div class="flex justify-around items-center bg-white/50 rounded-xl p-4">
            <div class="text-center">
                <div class="text-lg font-medium">1级</div>
                <div class="text-gray-600 text-sm">东北风</div>
            </div>
            <div class="text-center">
                <div class="text-lg font-medium">54%</div>
                <div class="text-gray-600 text-sm">相对湿度</div>
            </div>
        </div>
    </div>
</body>
</html>
    